<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <title>APP</title>
    <link rel="stylesheet" type="text/css" href="css/aui.css"/>
    <link rel="stylesheet" type="text/css" href="css/plugin.css"/>
    <style type="text/css">
        .aui-btn {
            margin: 20px 0;
        }

        p {
            margin-top: 25px;
        }
    </style>
</head>
<body>
<div class="aui-toast" style="display:none" id="default">
    <i class="aui-iconfont aui-icon-check"></i>

    <div class="aui-toast-content">
        提交成功
    </div>
</div>
<div class="aui-toast" style="display:none" id="loading">
    <div class="aui-toast-loading"></div>
    <div class="aui-toast-content">
        加载中
    </div>
</div>
<p class="aui-text-center">
    TOAST
</p>

<div class="aui-content-padded">
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="test()">
        弹出loading样式（toast）
    </div>
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="testDefault()">
        defaulte
    </div>
    <div class="aui-btn aui-btn-block aui-btn-success" tapmode onclick="testConfirm()">
        confirm/alert/promot
    </div>
</div>
<!--<div class="overflow-container promot-div">
    <div class="promot-container">
        <div class="promot-title">提示</div>
        <div class="promot-content">
            <input type="text" placeholder="请输入...">
        </div>
        <div class="promot-btn-group">
            <div class="promot-btn cancel-btn">确定</div>
        </div>
    </div>
</div>-->
</body>
<script type="text/javascript" src="script/jquery-1.10.2.js"></script>
<script type="text/javascript" src="script/plugin.js"></script>
<script type="text/javascript">
    function showDefault() {
        $api.css($api.byId("default"), "display:block");
        setTimeout(function () {
            $api.css($api.byId("default"), "display:none");
        }, 2000)
    }

    function showLoading() {
        $api.css($api.byId("loading"), "display:block");
        setTimeout(function () {
            $api.css($api.byId("loading"), "display:none");
        }, 2000)
    }

    function test(dom) {
        $.loading.openLoading();
        setTimeout(function () {
            $.loading.closeLoading();
        }, 2000)
    }

    function testDefault() {
        $.default.openDefault('你大爷');
        setTimeout(function () {
            $.default.closeDefault();
        }, 2000)
    }

    function testConfirm() {
        var options = {
            title: '提示',
            content: '确定要打开Alert弹窗吗?',
            cancelBtnText: '取消',
            submitBtnText: '确定'
        }
        $.confirm.openConfirm(options, function (index) {
            if (index === 1) {
                testAlert();
            }
        })
    }

    function testAlert() {
        var options = {
            title: '提示',
            content: '确定要打开promot窗口吗？',
            btntext: '确定'
        }
        $.alert.openAlert(options, function () {
            var options = {
                title: '提示',
                placeholder: '请输入...',
                btntext: '确定'
            }
            $.promot.openPromot(options, function (data) {
                alert(data);
            })
        })
    }
</script>
</html>